<template>
  <div>
    注:
    <span style="color: red; margin-left: 2px">红色为您的课程,</span>
    <span style="color: rgb(100, 200, 255); margin-left: 2px">蓝色为其他老师的课程</span>
    <!-- 课程表  -->
    <div class="class-table">
      <table style="width: 100%; border-collapse: collapse" border="1">
        <!-- 第一行 表格标题 -->
        <tr>
          <th width="20px" rowspan="2">课时</th>
          <!-- 星期一 到 星期日 -->
          <th v-for="(item, index) in datelist" :key="index" colspan="4">
            <p>{{ item.week }}</p>
          </th>
        </tr>
        <!-- 表格内容 -->
        <!-- 第二行,课时展示 -->
        <tr>
          <!-- <td></td> -->
          <td>1-2</td>
          <td>3-4</td>
          <td>5-6</td>
          <td>7-8</td>
          <td>1-2</td>
          <td>3-4</td>
          <td>5-6</td>
          <td>7-8</td>
          <td>1-2</td>
          <td>3-4</td>
          <td>5-6</td>
          <td>7-8</td>
          <td>1-2</td>
          <td>3-4</td>
          <td>5-6</td>
          <td>7-8</td>
          <td>1-2</td>
          <td>3-4</td>
          <td>5-6</td>
          <td>7-8</td>
          <td>1-2</td>
          <td>3-4</td>
          <td>5-6</td>
          <td>7-8</td>
          <td>1-2</td>
          <td>3-4</td>
          <td>5-6</td>
          <td>7-8</td>
        </tr>
        <!-- 第3行 到 第18行 -->
        <tr class="class-tr" v-for="(weekindex, index) in 18" :key="index">
          <!-- 第一列 -->
          <td style="padding: 2px 0px">
            第
            <br />
            {{ weekindex }}
            <br />
            周
          </td>
          <!-- 第2列 到 第29列 -->
          <td class="class-td" v-for="(weekdayindex, index) in datetd" :key="index">
            <!-- 在ytimes中查找匹配的课程信息 -->
            <template
              v-if="
                ytimes.find(
                  (item) =>
                    // 星期几能否匹配
                    item.day === weekdayindex.week &&
                    // 第几节课能否匹配
                    item.time!.includes(weekdayindex.time) &&
                    item.start! <= weekindex &&
                    item.end! >= weekindex
                )
              ">
              <div
                class="class-info"
                :style="{
                  backgroundColor: backgroundColor(weekindex, weekdayindex)
                }"></div>
            </template>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ytimeStore } from '@/stores/ytime'
// import { loginStore } from '@/stores/user'
import { type User } from '@/type'

// 获取登录用户信息.
const userS = ref<User>({})
// 从 sessionStorage 中读取用户信息
const storedUser = sessionStorage.getItem('user')
// 存储的用户信息存在，解析为对象
if (storedUser) {
  const user = JSON.parse(storedUser)
  userS.value = user
}

// 获取906实验室的预约信息
const { ytimes906S } = ytimeStore()
const ytimes = ytimes906S

const backgroundColor = (
  weekindex: number,
  weekdayindex: { week: string | undefined; time: number }
) => {
  const hasCourse = ytimes.value.find(
    (item) =>
      item.day === weekdayindex.week &&
      item.time!.includes(weekdayindex.time) &&
      item.start! <= weekindex &&
      item.end! >= weekindex
  )
  const isTeacher = hasCourse?.tname === userS.value.name

  // 如果当前登录老师名字匹配，并且该时间段有课，则背景颜色为红色，否则为蓝色
  return isTeacher && hasCourse ? '#ee4863' : 'rgb(137, 222, 255)'
}

// 周几
const datelist = reactive([
  {
    id: 1,
    week: '星期一'
  },
  {
    id: 2,
    week: '星期二'
  },
  {
    id: 3,
    week: '星期三'
  },
  {
    id: 4,
    week: '星期四'
  },
  {
    id: 5,
    week: '星期五'
  },
  {
    id: 6,
    week: '星期六'
  },
  {
    id: 7,
    week: '星期日'
  }
])
const datetd = reactive([
  {
    time: 1,
    week: '星期一'
  },
  {
    time: 3,
    week: '星期一'
  },
  {
    time: 5,
    week: '星期一'
  },
  {
    time: 7,
    week: '星期一'
  },
  {
    time: 1,
    week: '星期二'
  },
  {
    time: 3,
    week: '星期二'
  },
  {
    time: 5,
    week: '星期二'
  },
  {
    time: 7,
    week: '星期二'
  },
  {
    time: 1,
    week: '星期三'
  },
  {
    time: 3,
    week: '星期三'
  },
  {
    time: 5,
    week: '星期三'
  },
  {
    time: 7,
    week: '星期三'
  },
  {
    time: 1,
    week: '星期四'
  },
  {
    time: 3,
    week: '星期四'
  },
  {
    time: 5,
    week: '星期四'
  },
  {
    time: 7,
    week: '星期四'
  },
  {
    time: 1,
    week: '星期五'
  },
  {
    time: 3,
    week: '星期五'
  },
  {
    time: 5,
    week: '星期五'
  },
  {
    time: 7,
    week: '星期五'
  },
  {
    time: 1,
    week: '星期六'
  },
  {
    time: 3,
    week: '星期六'
  },
  {
    time: 5,
    week: '星期六'
  },
  {
    time: 7,
    week: '星期六'
  },
  {
    time: 1,
    week: '星期日'
  },
  {
    time: 3,
    week: '星期日'
  },
  {
    time: 5,
    week: '星期日'
  },
  {
    time: 7,
    week: '星期日'
  }
])
</script>
<style scoped>
.class-table table {
  margin-top: 10px;
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #000;
}

/* 设置表头样式 */
.class-table th {
  font-weight: bold;
  border: 1px solid #e4f4f8;
  padding: 10px;
  background-color: #d3e1fc;
}

/* 设置表体样式 */
.class-table td {
  border: 1px solid #cccccc;
  padding: 0;
  text-align: center;
  vertical-align: middle;
}

/* 每一个单元格 */
.class-td {
  padding: 0;
  position: relative;
}
.class-th {
  width: 13.8%;
  padding: 8px;
}

/* 单元格内的容器 */
.class-info {
  /* border: 1px solid #ffffff; */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  text-align: center;
}
</style>
